﻿@{
    Layout = "_LayoutAdmin";
}

@model CustomPageEditViewModel

@{
    <script>
    var needLoadInitValues = @((!string.IsNullOrWhiteSpace(Model.RawHtmlContent) || !string.IsNullOrWhiteSpace(Model.CssContent)).ToString().ToLower());
    </script>
}

@section scripts{
    <script>var require = { paths: { 'vs': '/lib/monaco-editor/min/vs' } };</script>
    <script src="~/lib/monaco-editor/min/vs/loader.js"></script>
    <script>
        $("#Title").change(function () {
            $("#RouteName").val(slugify($(this).val()));
        });

        var htmlContentEditor = null;
        var cssContentEditor = null;
        var hasCssEditorInitialized = false;

        require(['vs/editor/editor.main'], function () {
            initHtmlEditor();
        });

        var initHtmlEditor = function () {
            var htmlContentEditorDiv = document.getElementById('RawHtmlContentEditor');
            htmlContentEditor = monaco.editor.create(htmlContentEditorDiv, {
                language: 'html'
            });
            htmlContentEditor.layout();

            if (needLoadInitValues) {
                var htmlValue = $("#RawHtmlContent").val();
                htmlContentEditor.setValue(htmlValue);
            }
        }

        var initCssEditor = function () {
            var cssContentEditorDiv = document.getElementById('CssContentEditor');
            cssContentEditor = monaco.editor.create(cssContentEditorDiv, {
                language: 'css'
            });
            cssContentEditor.layout();
            hasCssEditorInitialized = true;

            if (needLoadInitValues) {
                var cssValue = $("#CssContent").val();
                window.cssContentEditor.setValue(cssValue);
            }
        }

        var assignEditorValues = function () {
            var htmlValue = window.htmlContentEditor.getValue();

            // Edit Mode, preserve old value when user has not clicked on CSS tab
            var oldCssValue = $("#CssContent").val();
            var cssValue = hasCssEditorInitialized ? window.cssContentEditor.getValue() : oldCssValue;

            $("#RawHtmlContent").val(htmlValue);
            $("#CssContent").val(cssValue);
        }

        $("#btn-submit").click(function (e) {
            assignEditorValues();
            if (!$(".page-edit-form").valid()) {
                e.preventDefault();
            }
        });

        $(function () {
            $('a[data-toggle="tab"]').on('shown.bs.tab',
                function (e) {
                    var isCSSTab = e.target.id === "csscontent-tab";
                    if (isCSSTab && !hasCssEditorInitialized) {
                        initCssEditor();
                    }
                });
        });

    </script>
}

@section head{
    <style>
        .monaco-target {
            border-left: 1px solid #dee2e6;
            border-right: 1px solid #dee2e6;
            border-bottom: 1px solid #dee2e6;
            width: 100%;
            min-height: 512px;
        }
    </style>
}

<form class="page-edit-form" method="post" asp-action="CreateOrEdit" 
      data-ajax-begin="onPageCreateEditBegin"
      data-ajax-complete="onPageCreateEditComplete"
      data-ajax-failure="onPageCreateEditFailed"
      data-ajax-success="onPageCreateEditSuccess"
      data-ajax="true"
      data-ajax-method="POST">
    <div asp-validation-summary="ModelOnly" class="alert alert-danger"></div>
    <input type="hidden" asp-for="Id" />
    <div class="row">
        <div class="col-md-9 col-xl-10">
            <input type="text" asp-for="Title" class="form-control form-control-lg" placeholder="Title" />
            <div>
                <span asp-validation-for="Title" class="text-danger"></span>
            </div>

            <hr />

            <div class="input-group input-group-sm">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="basic-addon3">page/</span>
                </div>
                <input type="text" asp-for="RouteName" class="form-control form-control-sm" placeholder="route-name" />
            </div>
            <div>
                <span asp-validation-for="RouteName" class="text-danger"></span>
            </div>

            <div>
                <span asp-validation-for="RawHtmlContent" class="text-danger"></span>
            </div>
            <div>
                <span asp-validation-for="CssContent" class="text-danger"></span>
            </div>

            <ul class="nav nav-tabs mt-3" id="editor-box-tabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="profile-tab" data-toggle="tab" href="#rawhtmlcontent-editor-box" role="tab" aria-controls="html" aria-selected="false">HTML</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="csscontent-tab" data-toggle="tab" href="#csscontent-editor-box" role="tab" aria-controls="css" aria-selected="true">CSS</a>
                </li>
            </ul>

            <div class="tab-content">
                <div class="tab-pane active" id="rawhtmlcontent-editor-box" role="tabpanel" aria-labelledby="html-tab">
                    <div id="RawHtmlContentEditor" class="monaco-target">

                    </div>
                    <textarea asp-for="RawHtmlContent" class="page-rawhtmlcontent-textarea d-none"></textarea>
                </div>
                <div class="tab-pane" id="csscontent-editor-box" role="tabpanel" aria-labelledby="css-tab">
                    <div id="CssContentEditor" class="monaco-target">

                    </div>
                    <textarea asp-for="CssContent" class="page-csscontent-textarea d-none"></textarea>
                </div>
            </div>
        </div>

        <div class="col-md-3 col-xl-2">
            <div class="card mb-4">
                <div class="card-header">Options</div>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">
                        <label asp-for="HideSidebar" class="control-label"></label>
                        <div class="material-switch float-right">
                            <input @(Model.HideSidebar ? "checked=\" checked\"" : "") id="HideSidebar" name="HideSidebar" type="checkbox" value="true">
                            <label for="HideSidebar" class="label-success"></label>
                            <input name="HideSidebar" type="hidden" value="false">
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <hr />

    <div>
        <button type="submit" class="btn btn-success" id="btn-submit">
            Save
        </button>
        <a asp-controller="CustomPage" asp-action="Manage" class="btn btn-light">Cancel</a>
    </div>
</form>